<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page trimDirectiveWhitespaces="true" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="zh-CN">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	 <link rel="icon" href="./resources/login.ico">
	<title>我们的空间</title>
	<link rel="stylesheet" type="text/css" href="../../css/show/demo.css" />
	<link rel="stylesheet" type="text/css" href="../../css/show/style.css">
	<!-- Bootstrap core CSS -->
    <link href="../../bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <!-- Custom styles for this template -->
    <link href="../../bootstrap/css/carousel.css" rel="stylesheet">
    <link href="../../css/loading/fakeLoader.css" rel="stylesheet">
    <style type="text/css">
    body{
    	background : white
    }
    </style>
</head>
<body>
 <div class="navbar-wrapper ">
      <div class="container">
        <nav class="navbar navbar-inverse navbar-static-top">
          <div class="container">
            <div class="navbar-header">
              <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">动态导航栏</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
              <a class="navbar-brand" href="#">我们的空间</a>
            </div>
            <div class="fakeloader"></div>
            <div id="navbar" class="navbar-collapse collapse">
              <ul class="nav navbar-nav">
                <li class="active"><a href="showPlane" class="current">婚纱照</a></li>
                <li><a href="show3D">生活照</a></li>
                <li><a href="#">关于</a></li>
                <li class="dropdown">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">其他 <span class="caret"></span></a>
                  <ul class="dropdown-menu">
                    <li><a href="mainUI">主页</a></li>
                    <li><a href="#">编程</a></li>
                    <li><a href="#">交友</a></li>
                  </ul>
                </li>
              </ul>
            </div>
          </div>
        </nav>
      </div>
    </div>
    
     <div id="myCarousel" class="carousel slide" data-ride="carousel">
      <!-- Indicators -->
      <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
      </ol>
      <div class="carousel-inner img-responsive" role="listbox">
        <div class="item active">
          <img class="lazy" data-original="resources/images/001.jpg" alt="First slide"/>
            <div class="carousel-caption">
              <h1>我们</h1>
              <p>❤欣赏我们甜蜜的婚纱照❤</p>
              <p><a class="btn btn-lg btn-primary" href="#" role="button">观赏</a></p>
            </div>
        </div>
        <div class="item">
          <img class="lazy" data-original="resources/images/002.jpg" alt="Second slide"/>
            <div class="carousel-caption">
              <h1>永结同心</h1>
              <p>❤欣赏我们甜蜜的婚纱照❤</p>
              <p><a class="btn btn-lg btn-primary" href="#" role="button">观赏</a></p>
            </div>
        </div>
        <div class="item">
          <img class="lazy" data-original="resources/images/003.jpg" alt="Third slide"/>
            <div class="carousel-caption">
              <h1>至死不渝</h1>
              <p>❤欣赏我们甜蜜的婚纱照❤</p>
              <p><a class="btn btn-lg btn-primary" href="#" role="button">观赏</a></p>
            </div>
        </div>
      </div>
      <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
    </div><!-- /.carousel -->
 
 	<div class="container marketing">   
      <div class="row">
        <div class="col-lg-4">
          <img class="lazy img-circle" data-original="resources/images/7.jpg" alt="Generic placeholder image" width="140" height="140">
          <h2>相爱到永远</h2>
          <p>致我们的爱，天荒地老，不离不弃</p>
          <p><a class="btn btn-default" href="#" role="button">点赞❤</a></p>
        </div><!-- /.col-lg-4 -->
        <div class="col-lg-4">
          <img class="lazy img-circle" data-original="resources/images/8.jpg" alt="Generic placeholder image" width="140" height="140">
          <h2>相爱到永远</h2>
          <p>致我们的爱，天荒地老，不离不弃</p>
          <p><a class="btn btn-default" href="#" role="button">点赞❤</a></p>
        </div><!-- /.col-lg-4 -->
        <div class="col-lg-4">
          <img class="lazy img-circle" data-original="resources/images/9.jpg" alt="Generic placeholder image" width="140" height="140">
          <h2>相爱到永远</h2>
          <p>致我们的爱，天荒地老，不离不弃</p>
          <p><a class="btn btn-default" href="#" role="button">点赞❤</a></p>
        </div><!-- /.col-lg-4 -->
      </div><!-- /.row -->

      <hr class="featurette-divider">

      <div class="row featurette">
        <div class="col-md-7">
          <h2 class="featurette-heading">First featurette heading. <span class="text-muted">It'll blow your mind.</span></h2>
          <p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
        </div>
        <div class="col-md-5">
          <img class="lazy featurette-image img-responsive center-block" data-original="resources/images/31.jpg" style="background-image: url('resources/grey.gif')"/>
        </div>
      </div>

      <hr class="featurette-divider">

      <div class="row featurette">
        <div class="col-md-7 col-md-push-5">
          <h2 class="featurette-heading">Oh yeah, it's that good. <span class="text-muted">See for yourself.</span></h2>
          <p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
        </div>
        <div class="col-md-5 col-md-pull-7">
          <img class="lazy featurette-image img-responsive center-block" data-original="resources/images/11.jpg" style="background-image: url('resources/grey.gif')"/>       
        </div>
      </div>

      <hr class="featurette-divider">

      <div class="row featurette">
        <div class="col-md-7">
          <h2 class="featurette-heading">And lastly, this one. <span class="text-muted">Checkmate.</span></h2>
          <p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
        </div>
        <div class="col-md-5">
          <img class="lazy featurette-image img-responsive center-block" data-original="resources/images/20.jpg" style="background-image: url('resources/loading.gif')"/>        
        </div>
      </div>

      <hr class="featurette-divider">

      <!-- /END THE FEATURETTES -->
    
          <!-- FOOTER -->
      <footer>
        <p class="pull-right"><a href="#">跳转到顶部</a></p>
        <p style="text-align:center;">&copy; 2016 Company, Inc. &middot; <a href="#">陈艳</a> ❤ <a href="#">穆海涛</a></p>
      </footer>
      </div>
</body>
	<script src="../../jquery/jquery.min.js" type="text/javascript"></script>
	<script src="../../bootstrap/js/bootstrap.min.js"></script>
	<script type="text/javascript" src="../../js/loading/fakeLoader.min.js"></script>
	<script type="text/javascript" src="../../js/loading/jquery.lazyload.min.js?1.9.3"></script>
	<script type="text/javascript">
		$(document).ready(function(){			
            $(".fakeloader").fakeLoader({
                timeToHide:1200,
                bgColor:"gray",
                spinner:"spinner2"
            });
		 $("img.lazy").lazyload();
		});
	</script>
</html>
<%-- <%
	out.clear();  
	out = pageContext.pushBody(); 
%> --%>